<template>
  <div class="card_container">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>德州</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <!-- <span @click="onSubmitCreate" class="save">保存</span> -->
      </template>
    </nut-navbar>
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="gameTabList">
      <nut-tab-pane :title="item.name" :pane-key="item.id" v-for="item in gameTabList" :key="item.id">
        <!-- 轮播 -->
        <nut-swiper
            :init-page="0"
            :auto-play="3000"
            pagination-visible
            pagination-color="#426543"
            pagination-unselected-color="#808080"
            style="height: 124px"
            >
            <nut-swiper-item v-for="(item, index) in list" :key="index">
              <img :src="item" alt="" class="imgs" draggable="false" />
            </nut-swiper-item>
        </nut-swiper>
        <!-- 普通 -->
        <template v-if="item.id === 5">
          <TournamentCard  :tournaments="tournamentList" />
        </template>
        <!-- 赛事 -->
        <template v-else>
          <GmablingCard />
        </template>
      </nut-tab-pane>
    </nut-tabs>
    <!-- 底部 -->
    <div class="button_container">
      <div class="button_box">
        <span class="button_start" @click="handleStartClick">快速开始</span>
        <span class="button_default" @click="handleDefaultClick">空位</span>
        <span class="button_filter" @click="handleFilterClick">
          <i class="icon_filter"></i>
        </span>
      </div>
    </div>

    <!-- 快速弹窗 -->
    <QuickStartModal
      v-model:visible="isShowApply"
      :close="onModalClose"
    />

    <!-- 筛选 -->
    <FilterBox :isPopup="isPopup" :close="closePopup" :isType="2" />

    <!-- 悬浮框 -->
    <LevitateBox />
  </div>
</template>

<script lang="ts" setup>
import {  ref } from 'vue';
import FilterBox from './filterBox.vue';
import LevitateBox from '../components/levitateBox.vue';
import GmablingCard from "../components/gamblingCard.vue";
import TournamentCard from "../components/tournamentCard.vue";
import QuickStartModal from "@/components/quickStartModal.vue";

import {  useRouter } from "vue-router";
const router = useRouter();

const state = ref({
  // 1为推荐
  agentId: 1,
})

const list = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
])

const gameTabList = ref([
  {
    id: 1,
    name: "推荐",
  },
  {
    id: 2,
    name: "经典",
  },
  {
    id: 3,
    name: "短牌",
  },
  {
    id: 4,
    name: "短牌",
  },
  {
    id: 5,
    name: "赛事",
  }
]);

// 赛事列表数据
const tournamentList = ref([
  {
    round: "5张奥马哈", // 比赛回合
    prize: "$12,500,09", // 奖金
    name: "赛事IGO+·赛事名称", // 比赛名称
    startTime: new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString(), // 开始时间：8小时后
    buyIn: "免费", // 买入
    status: 0, // 比赛状态
    people: 1999, // 参赛人数
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "6张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() + 4 * 60 * 60 * 1000).toISOString(), // 开始时间：4小时后
    buyIn: "免费",
    status: 0,
    people: 1999,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 10 * 60 * 1000).toISOString(), // 开始时间：10分钟前
    buyIn: "免费",
    status: 2,
    people: 1200,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "5张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 25 * 60 * 1000).toISOString(), // 开始时间：25分钟前
    buyIn: "免费",
    status: 4,
    people: 800,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "6张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 2 * 60 * 60 * 1000).toISOString(), // 开始时间：2小时前
    buyIn: "免费",
    status: 3,
    people: 500,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  {
    round: "奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 6 * 60 * 60 * 1000).toISOString(), // 开始时间：6小时前
    buyIn: "免费",
    status: 5,
    people: 0,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
]);

const tabChange = (item: any) => {
  console.log('item', item)
}

const isShowApply = ref(false);
const handleStartClick = () => {
  console.log("快速开始按钮被点击");
  isShowApply.value = true
}

const onModalClose = () => {
  isShowApply.value = false;
};

const handleDefaultClick = () => {
  console.log("空位按钮被点击");
}

const isPopup = ref(false);
const handleFilterClick = () => {
  console.log("筛选按钮被点击");
  isPopup.value = true
}
const closePopup = () => {
  isPopup.value = false;
};



// const onSwitchGameClick = (game: { id: number; title: string }) => {
//   console.log(`你点击了游戏：${game.title}`);
// }

</script>

<style scoped lang="scss">
.card_container {
  .arrow_left {
    width: 24px;
    height: 24px;
  }
  
  .imgs{
    height: 124px;
    width: 347px;
    
  }
  :deep(.nut-swiper) {
    width: 347px;
    border-radius: 8px;
    margin: 0 auto 10px;
  }

  :deep(.nut-tabs__titles) {
    height: 36px;
  }

  .button_container {
    width: 100%;
    height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    background: #131232;
    border-radius: 8px 8px 0 0;

    .button_box {
      width: 347px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px; // 按钮间距

      .button_start {
        width: 142px;
        height: 40px;
        background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
        box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
        color: white;
        border-radius: 8px;
        padding: 10px 20px;
        color: #FFF;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
      }

      .button_default {
        width: 142px;
        height: 40px;
        background: #282747;
        box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
        border-radius: 8px;
        padding: 10px 20px;
        color: #FFF;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
      }

      .button_filter {
        background-color: #282747;
        box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
      }

      .button_filter {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        font-size: 18px;

        .icon_filter::before {
          content: "🔍"; // 替换为实际的筛选图标
          font-size: 16px;
        }
      }
    }
  }
  
}
.popup_body {
  color: #fff;
  padding: 10px;

  .game_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 20px;

    .game_item {
      text-align: center;
      color: #ffffff;

      .game_icon {
        width: 64px;
        height: 64px;
        display: block;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        margin-bottom: 10px;
      }

      .game_title {
        color: #FFF;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
}


</style>